<script setup>

</script>

<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <div class="title">
                    <i class="iconfont icon-wangyiyunyinle"></i><span>网易云音乐</span>
                </div>
                <el-menu class="el-menu-vertical-demo" router>
                    <el-menu-item index="findmusic"><el-icon><Headset /></el-icon>发现音乐</el-menu-item>
                    <el-menu-item index="mymusic"><el-icon><VideoPlay /></el-icon>我的音乐</el-menu-item>
                    <el-menu-item index="3"><el-icon><Star /></el-icon>关注</el-menu-item>
                    <el-menu-item index="4"><el-icon><Sunrise /></el-icon>音乐人</el-menu-item>
                    <el-menu-item index="4"><el-icon><Pointer /></el-icon>每日推荐</el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <RouterView />
            </el-main>
        </el-container>
    </div>
</template>

<style scoped>

.el-aside {
    background: #e9b9b9;
    height: 100vh;
    overflow: hidden;
    .title {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        color: rgb(254, 254, 254);
        .iconfont{
            font-size: 40px;
            margin-right: 10px;
            color: red;
        }
    }
    .el-menu-vertical-demo{
        .el-menu-item {
        color: #fff;
        display: flex;
        justify-content:start;
        align-items: center;
        text-align: center;
        font-size: 16px;
    }
    }
    .el-menu-item:hover {
            background: #cd7070;
        }
}
.el-main{
    margin: 0;
    padding: 0;
}
.el-menu {
    background: #e9b9b9;
}
</style>
